<template>
  <div>
    <div>
      <!-- 表格和两个按钮 -->
      <div class="Page_box">
      <div class="filter-container">
        <div class="input-box">
          <span class="item-label">执行日期: </span>
          <el-date-picker v-model="submis_time" type="datetimerange" value-format="yyyy-MM-dd hh:mm:ss"
                start-placeholder="开始日期" end-placeholder="结束日期" @change="changeDateTime"/>
        </div>
      <div class="input-box">
        <span class="item-label">网点: </span>
        <el-select  class="group-select" v-model="listQuery.pointId" filterable reserve-keyword placeholder="选择网点" @change="getList" clearable>
          <el-option v-for="item in list_branch" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </div>
      <div class="input-box">
        <span class="item-label">发起人: </span>
        <el-select  class="group-select" v-model="listQuery.sendUserIds" filterable reserve-keyword placeholder="选择发起人" @change="getList" clearable>
          <el-option v-for="item in list_initiator" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </div>
      <div class="input-box">
        <span class="item-label">巡店人: </span>
        <el-select  class="group-select" v-model="listQuery.patrolUserIds" filterable reserve-keyword placeholder="选择巡店人" @change="getList" clearable>
          <el-option v-for="item in list_patrol" :key="item.id" :label="item.name" :value="item.id"> </el-option>
        </el-select>
      </div>
      <div class="input-box">
        <span class="item-label">是否逾期: </span>
        <el-select  class="group-select" v-model="listQuery.overdue" filterable reserve-keyword placeholder="请选择逾期状态" @change="getList" clearable>
          <el-option v-for="item in list_overdue" :key="item.id" :label="item.label" :value="item.id"> </el-option>
        </el-select>
      </div>
      <div class="input-box">
        <span class="item-label">巡检状态: </span>
        <el-select  class="group-select" v-model="listQuery.status" filterable reserve-keyword placeholder="请选择巡检状态" @change="getList" clearable>
          <el-option v-for="item in list_status" :key="item.id" :label="item.label" :value="item.id"> </el-option>
        </el-select>
      </div>
      <div class="input-box">
        <span class="item-label">任务名称: </span>
        <el-input v-model="listQuery.keyword" @keyup.enter.native="handleFilter" placeholder="查找任务名称" class="crud-input">
          <el-button class="search-btn" slot="append" icon="el-icon-search" @click="handleFilter" />
        </el-input>
      </div>
        <el-button class="plain-btn" @click="clearFilter">重置</el-button>
        </div>
      <!-- 表格 -->
      <el-table ref="crurecordTable" v-loading="listLoading" 
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading" 
      border :data="list">
        <el-table-column
          align="center"
          label="执行日期" >
          <template slot-scope="{ row }">
            <!-- 时间戳 -->
            <span>{{ row.startDate | parseTime("{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sendUser.name" label="发起人" align="center" />
        <el-table-column prop="name" label="任务名称" width="160" align="center" />
        <!-- 网点 -->
        <el-table-column
          align="center"
          prop="point.name"
          label="网点"
          width="230"/>
        <el-table-column
          prop="patrolUser.name"
          align="center"
          label="巡店人"/>
        <el-table-column label="执行时段" align="center">
          <!-- 遍历了对象中的数组 展示数组中的对象 -->
          <template slot-scope="{ row }">
            <span v-for="(item, index) in row.patrolTaskTimes" :key="index">
              {{ item.startTime | parseTime("{h}:{i}") }} --
              {{ item.endTime | parseTime(" {h}:{i}") }} <br>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="是否逾期" align="center">
          <template slot-scope="{ row }">
            <!-- 时间戳 -->
            <span>{{ row.overdue == 0 ? "否" : "是" }}</span>
          </template></el-table-column>
        <el-table-column prop="patrolStatus" label="巡店状态" align="center">
          <template slot-scope="{ row }">
            <!-- 时间戳 -->
            <span>{{ row.patrolStatus == 0 ? "待巡检" : "已巡检" }}</span>
          </template></el-table-column>
        <el-table-column prop="operate" label="操作" min-width="60" align="center">
          <!-- 点击查看 判断是否is_detail为真 为真则展示详情页 -->
          <template slot-scope="scope44">
            <span class="action" @click="_dTableVisible(scope44.row)">查看</span>
          </template>
          <!-- 嵌套内容 -->
        </el-table-column>
      </el-table>
      <el-dialog
        class="detailsBox"
        title="详细内容"
        :visible.sync="dialogTableVisible">
        <div class="detalistBoxleft">
          <div class="patrolTimebox field">
            <div>创建时间：</div>
            <div class="son_box3">
              <span>
                {{ queryObj.createTime | parseTime("{y}-{m}-{d} {h}:{i}") }}
              </span>
            </div>
          </div>
          <div class="patrolTimebox field">
            <div>更新时间：</div>
            <div class="son_box3">
              <span>
                {{ queryObj.updateTime | parseTime("{y}-{m}-{d} {h}:{i}") }}
              </span>
            </div>
          </div>
          <div class="field">
            执行日期：{{ queryObj.startDate | parseTime("{y}-{m}-{d}") }}
          </div>
          <div class="field">
            结束日期：{{ queryObj.endDate | parseTime("{y}-{m}-{d}") }}
          </div>
          <div class="field">任务名称：{{ queryObj.name }}</div>
          <div class="patrolTimebox field">
            <div class="son_box2">发起人：</div>
            <div class="son_box3">
              <span>{{ queryObj.sendUser.name }}</span>
            </div>
          </div>
          <div class="patrolTimebox field">
            <div class="son_box2">巡店人：</div>
            <div class="son_box3">
              <span> {{ queryObj.patrolUser.name }}</span>
            </div>
          </div>
          <div class="patrolTimebox field">
            <div class="son_box">执行时段：</div>
            <div class="son_box3">
              <div v-for="(item2, index2) in queryObj.patrolTaskTimes" :key="index2">
                <span>
                  {{ item2.startTime | parseTime("{h}:{i}") }} -
                  {{ item2.endTime | parseTime(" {h}:{i}") }} <br>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="detalistBoxright">
          <div class="patrolTimebox field">
            <div class="son_box2">网点：</div>
            <div class="son_box3">
              <span>
                {{ queryObj.point.name }}
              </span>
            </div>
          </div>
          <div class="field">
            是否逾期：{{ queryObj.overdue == 0 ? "否" : "是" }}
          </div>
          <div class="field">
            巡店状态：{{ queryObj.patrolStatus == 0 ? "待巡检" : "已巡检" }}
          </div>
          <div class="patrolChecksbox field">
            <div class="son_box2">巡逻任务查询：</div>
            <div class="son_box3">
              <div
                v-for="(item2, index2) in queryObj.patrolTaskChecks"
                :key="index2" >
                <span> {{ index2 + 1 }}.{{ item2.name }} <br> </span>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
      <!-- 1 分页器 -->
      <pagination
        v-show="true"
        margin="0"
        :total="total"
        :page.sync="listQuery.offset"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </div>
  </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils' // 解析时间
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import {  listPatrolTask, listPatrolTaskPoint, listSendUsers, listPatrolUsers} from '@/api/cruising'
// 3.查询定时任务列表,4.查询巡店任务网点,5.查询巡检任务发起人信息,6.查询巡检任务巡检人信息

export default {
  components: { Pagination },
  data() {
    return {
      datas: {}, // 存储后端数据到这里
      total: 0,
      dialogTableVisible: false, // 点击查看
      listLoading: false,//加载
      // 数据对象
      list: [],
      // 点击查看后展示的数据
      queryObj: {
        point: {}, // 定义一个 防止用不了
        patrolUser: {},
        sendUser: {}
      },

      // 筛选框部分
      submis_time: null,   // 可以使用, 也可使用change(e) 的参数e
      listQuery: {
        offset: 1,   // 第几页
        limit: 10,   // 每页显示的条数row
        keyword: '',   // 搜索关键字
        startDate: '',
        endDate: '',
        sendUserIds: '',   // 发起人
        patrolUserIds: '',   // 巡店人
        pointIds: '',   // 网点id
        status: '',   // 巡检状态
        overdue: '',   // 逾期状态
        patrolTaskId: '',   // 任务id
      },
      list_branch: [],//网点列表
      list_initiator: [],   // 发起人
      list_patrol: [],   // 巡店人
      list_patrolTaskId: [],   // 任务id
      list_status: [{id:'', label: '全部'},{id: 0, label: '待巡检'},{id: 1, label: '已巡检'}],   // 巡店状态
      list_overdue: [{id:'', label: '全部'},{id: 0, label: '未逾期'},{id: 1, label: '已逾期'}],   // 逾期状态
    }
  },
  // 生命周期函数（初始化之前执行）
  created() {
    this.getBranchList()
    this.getList()
    this.getCommit()
    this.getCruisingUser()
  },
  methods: {
    // 从后端获取查询列表
    getList() {
      this.listLoading = true
      listPatrolTask({
        offset: this.listQuery.offset, // 页码
        limit: this.listQuery.limit,
        prId: this.listQuery.prId,
        startDate: this.listQuery.startDate,
        endDate: this.listQuery.endDate,
        sendUserIds: this.listQuery.sendUserIds,   // 发起人
        patrolUserIds: this.listQuery.patrolUserIds,   // 巡店人
        pointIds: this.listQuery.pointIds,   // 网点id
        status: this.listQuery.status,   // 巡检状态
        overdue: this.listQuery.overdue,   // 逾期状态
        patrolTaskId: this.listQuery.patrolTaskId,  //任务id
      }).then((res) => {
          if (res.code === 0) {
            // 将后端请求到的值 赋值给list这个数组
            this.total = parseInt(res.data.total)
            this.list = res.data.list
            this.listLoading = false
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        })
        .catch(() => [
          this.listLoading = false,
          this.$message({
            message: '网络错误',
            type: 'error'
          })
        ])
    },
    // 搜索
    handleFilter() {
      this.listQuery.offset = 1
      this.getList()
    },
    // 更改过滤条件: 日期时间
    changeDateTime(e) {
      // console.log(e);
      // console.log(this.select_datetime)
      this.listQuery.startDate = e[0].submissionTime
      this.listQuery.endDate = e[1].submissionTime
      this.getList()
    },
    // 获取当前区域的网点列表( 下拉回显)
    getBranchList() {
      listPatrolTaskPoint().then(res => {
        if(res.code == 0) {
          this.list_branch = res.data || []
        }
      })
    },
    // 获取发起人列表( 下拉回显 )
    getCommit() {
      listSendUsers().then(res => {
        this.list_initiator = res.data || []
      })
    },
    // 获取巡店人列表( 下拉回显 )
    getCruisingUser() {
      listPatrolUsers().then(res => {
        this.list_patrol = res.data || []
      })
    },
    // 重置过滤条件
    clearFilter() {
      this.submis_time = null
      this.listQuery = {
        startDate: '',
        endDate: '',
        sendUserIds: '',   // 发起人
        patrolUserIds: '',   // 处理人
        pointId: '',   // 网点id
        status: '',   // 处理状态
        overdue: '',   // 逾期状态
        patrolTaskId: '', //任务id
      }
      this.getList()
    },
    _dTableVisible(row) {
      this.queryObj = row // 点击触发函数 将点击行的值存入query里面
      // this.queryObj = Object.assign({},row)
      this.dialogTableVisible = true
      console.log('chakanduixs', row.point)
      console.log('出来啦没有', this.queryObj)
    }
  }
}
</script>

<style lang="scss">
  @import "~@/styles/variables.scss"; 

.crud-input {
    border: 0;
    &.el-input--medium {
      font-size: 12px;
    }
    &.el-input--medium .el-input__inner {
      height: 27px !important;
      background: transparent;
      border: 0;
      -webkit-appearance: none;
      border-radius: 3px;
      // padding: 12px 5px 12px 15px;
      color: $text_dark;
      caret-color: $text_dark;

      &:-webkit-autofill {
        box-shadow: 0 0 0 1000px $my_opacity inset !important;
        -webkit-text-fill-color: $text_dark !important;
      }
    }
    .el-input-group__append {
      color: var(--app_primary);
      border: 0;
      border-left: 1px solid var(--app_primary);
    }
  }
.filter-container {
      // background-color: #eef;
      .input-box {
        margin-bottom: 15px !important;
      }
    }
.Page_box {
  padding: 10px;
  background-color: $my_white;
}
/* 重置按钮 */
.btnbox {
  margin-bottom: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 默认页面 */
.pagination-container {
  margin-top: 0;
}
/* 查看按钮 */
.action {
  font-size: 13px;
  color: var(--app_primary);
  cursor: pointer;
  &:hover {
    text-decoration: underline;
        }
}
/* 详细内容信息 */
/* 组件的内部样式 */
.el-dialog__body {
  display: flex;
  padding-top: 10px;
}
// .detailsBox {
//   display: flex;
//   padding-top: 10px;
// }
.detalistBoxleft {
  flex: 1;
  padding: 0 20px;
}
.detalistBoxright {
  flex: 1;
  padding: 0 20px;
}
.patrolTimebox {
  display: flex;
}
.son_box {
  display: inline-flex;
  align-content: center;
  flex-wrap: wrap;
}
.field {
  margin-bottom: 15px;
}
.patrolChecksbox {
  display: flex;
}
.son_box2 {
  display: inline-flex;
  align-content: center;
  flex-wrap: wrap;
  width: 69px;
}
</style>

<style lang="scss" scoped>
  @import "~@/styles/variables.scss";

      .crud-input {
        height: 27px;
        width: 240px !important;
        border: 1px solid var(--app_primary);
        border-radius: 3px;
        // background-color: aqua;
      }
</style>